import { useEffect, useState, createElement } from 'react'
// createBrowserHistory,
// , HashHistory
import { createHashHistory } from 'history'
import { Router } from 'react-router-dom'
export const history = createHashHistory()
type Children = React.ReactElement<
  any,
  string | React.JSXElementConstructor<any>
> | null
interface HistoryRouterProps {
  history: typeof history
  children: Children
}
export const HistoryRouter: React.FC<HistoryRouterProps> = ({
  history,
  children,
}) => {
  // console.log('history', history)
  // console.log('children', children)
  const [state, setState] = useState({
    action: history.action,
    location: history.location,
  })
  useEffect(() => {
    history.listen(setState)
  }, [history])
  return createElement(
    Router,
    Object.assign({ children, navigator: history }, state)
  )
}
